<template>
    <!-- 定义一行，包含多个栅格列。 -->
    <el-row class="login-page">
        <el-col :span="12" class="bj"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 登录表单 -->
            <el-form ref="form"  v-if="isLoginForm" size="large" autocomplete="off" :model="loginData">
                <el-form-item>
                    <h1 style="color: #333;">旧城以西妆造馆</h1>
                </el-form-item>
                <el-form-item>
                    <el-input :prefixIcon="User" placeholder="请输入手机号" v-model="loginData.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input name="password" :prefix-icon="Lock" placeholder="请输入验证码"
                        v-model="loginData.code"></el-input>
                </el-form-item>

                <div>
                    <span id="updateCode" title="验证码还不清楚吗？" @click="updateCode">换一张</span>
                    <span id="code">{{ code }}</span>
                </div>
                <!-- 忘记密码 -->
                <el-form-item>
                    <div>
                        <el-checkbox @click="updateIds">记住我</el-checkbox>
                    </div>
                </el-form-item>
                <span style="color: #999;font-size: 13px;position: relative; top: -20px;">注：如未注册，则一键注册</span>
                <span id="fangke">
                    <router-link to="/home" style="color: dodgerblue; text-decoration: none;">访客模式-></router-link>
                </span>
                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space :disabled="dis" @click="login">登录</el-button>
                </el-form-item>
                <!-- 管理登录切换 登录表单-->
                <el-button style="margin-left: 265px;" color="#626aef" plain :icon="Setting" @click="isLoginForm = false">管理登录</el-button>
            </el-form>



            <!-- 管理登录表单 -->
            <el-form v-else size="large" :model="managerModel">
                <el-form-item>
                    <h1 style="color: #333;">管理端登录</h1>
                </el-form-item>
                <el-form-item>
                    <el-input :prefixIcon="User" placeholder="请输入账号" v-model="managerModel.account" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input type="password" :prefix-icon="Lock" v-model="managerModel.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button color="#626aef" class="button" type="primary" auto-insert-space @click="managerLogin">登录</el-button>
                </el-form-item>
                 <!-- 管理登录切换 登录表单-->
                 <el-button  plain :icon="Setting" @click="isLoginForm = true,removemanagerModel()">用户登录</el-button>
            </el-form>
        </el-col>
    </el-row>
</template>

<script setup>
//导入 element-plus 库中的图标组件 User 和 Lock
import { User, Lock,Setting } from "@element-plus/icons-vue";
//导入ref用于创建响应式对象
import { ref } from 'vue'
import userApi from '@/api/user'
import {userPiniaInfo} from '@/stores/userPinia'
import { managerPiniaInfo } from "@/stores/managerPinia";
import router  from "@/router";
import { ElMessage, ElNotification } from 'element-plus'
import managerApi from '@/api/manager'
const userPinia = userPiniaInfo();
const managerPinia = managerPiniaInfo();
const dis = ref(true)
const code = ref("mayue8")

//声明管理端登录数据模型
const managerModel = ref({
    account:"",
    password:""
})

//登录表单 显示
const isLoginForm = ref(true)

//控制按钮可以点击
const updateIds = () => {
    dis.value = dis.value == true ? false : true
}

//成功通知
const success = (name) => {
  ElNotification({
    title: 'Success',
    message: '登录成功：' + name,
    type: 'success',
  })
}

//1、定义数据模型
const loginData = ref({
    phone: "",
    code: "",
})

//清空管理数据模型方法‘
const removemanagerModel = ()=>{
    managerModel.value.account = ''
    managerModel.value.password = ''
}


//生成验证码
const updateCode = () => {
    //点击换验证码
    const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    const charactersLength = characters.length;
    let result = '';
    const length = 6;
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * charactersLength);
        result += characters.charAt(randomIndex);
    }
    code.value = result
}
const open1 = (name) => {
  ElNotification({
    title: '登录成功',
    message: "你爱工作~，" + name + "，继续加油哦",
    type: 'success',
  })
}
//第一个进，自动执行一次
updateCode()

//登录函数
const login = () =>{

    //校验验证码是否正确
    if(loginData.value.code != code.value){
        ElMessage.error("验证码错误！")
        return
    }

    //校验手机号是否符合格式
    const phoneRegex = /^1[3456789]\d{9}$/;
    if (!phoneRegex.test(loginData.value.phone)) {
        ElMessage.error("手机号格式不正确！")
        return
    }

    //根据手机号判断有没有登录过
    userApi.addUser(loginData.value).then( (res) =>{
        //更新pinia中的用户信息
        userPinia.setuserPinia(res.data.data)
        success(userPinia.userInfo.name)
        //跳转页面
        router.push("/home")
    })
}

//管理登录函数 - 员工在这分
const managerLogin =  async() =>{
    
    //判断账号密码是否输入
    if(managerModel.value.account != '' && managerModel.value.password != ''  ){
         const res = await managerApi.managerLogin(managerModel.value)
         console.log(res)
         if(res.data.code == 0){
            //把值存到pinia
            managerPinia.setManagerInfo(res.data.data)
            //提示信息
            open1(res.data.data.name);
            //跳转页面
            let url = res.data.data.role == 0 ? "/manager" : "/mStaff"
            router.push(url)
         }else{
            ElMessage.error("账号或密码不正确！")
         }
    }else{
        ElMessage.error("账号密码不能为空!")
    }

}
</script>


<style scoped>
.login-page {
    height: 100vh;
    background-color: white;
}

.bj {
    background-image: url('../images/login.jpg');
    background-size: cover;
    width: 100%;
    height: auto;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}


.form {
    margin-top: 200px;
}

.button {
    width: 400px;
}

#Pwd {
    margin-left: 240px;
}
#updateCode,
#code {
    display: inline-block;
    /* 将元素设置为内联块元素，方便在同一行显示且能设置尺寸等样式 */
    font-family: Arial, Helvetica, sans-serif;
    /* 设置字体，选择简洁清晰的字体样式 */
    padding: 5px 10px;
    /* 设置内边距，使内容周围有一定空间 */
    border: 1px solid #ccc;
    /* 添加边框，营造出验证码框的感觉 */
    border-radius: 5px;
    /* 边框圆角，使外观更圆润美观 */
    background-color: #f8f8f8;
    /* 设置背景色，选择淡色系让文字更清晰易读 */
    text-align: center;
    /* 文本居中对齐 */
    vertical-align: middle;
    /* 垂直方向上居中对齐，保证在同一行时排列整齐 */
    margin-right: 10px;
    /* 可以设置右边距，增加元素之间的间隔距离 */
}
#updateCode {
    cursor: pointer;
    /* 当鼠标悬停时显示手型光标，提示可点击操作 */
    user-select: none;
    /* 禁止用户选中文字，符合验证码这类不可选的特点 */
    transition: background-color 0.6s ease;

}

#updateCode:hover {
    background-color:#626aef;
    color: white;
}

#code {
    font-style: italic;
    letter-spacing: 3px;
    /* 增加字符间距，让验证码看起来更分散、更像验证码的样式 */
    width: 120px;
    /* 根据验证码长度等实际情况设置宽度 */
    min-width: 80px;
    /* 设置最小宽度，保证一定的显示空间 */
    height: 20px;
    /* 根据字体大小等设置合适的高度 */
}
#fangke{
    font-size: 13px;
    position: relative; 
    top: -20px;
    left: 150px;
}
</style>